<script lang="ts" setup>
import { Checkmark } from '@vicons/ionicons5'
import { computed, inject, toRef } from 'vue'

interface Props {
  label: string
  value: any
  checked?: boolean
  disabled?: boolean
  icon?: any
  iconColor?: string
  iconBackgroundColor?: string
  description?: string
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  icon: Checkmark,
  iconColor: '#f6ad55',
  iconBackgroundColor: 'rgba(246, 173, 85, 0.1)',
  description: '',
  checked: false
})

const radioGroup = inject('radioGroup', null)

const isChecked = computed(() => {
  if (radioGroup) {
    return radioGroup.selectedValue.value === props.value
  }
  return props.checked
})

const handleClick = () => {
  if (!props.disabled) {
    if (radioGroup) {
      radioGroup.updateValue(props.value)
    } else {
      // 如果没有在 radio group 中使用，则保持原有行为
      emit('update:checked', true)
    }
  }
}

const iconBackgroundColorRef = toRef(props, 'iconBackgroundColor')

// 保留 emit 以兼容单独使用的情况
const emit = defineEmits(['update:checked'])
</script>

<template>
  <div
    :class="[
      'senior-radio-item',
      { 'senior-radio-item--checked': isChecked, 'senior-radio-item--disabled': disabled }
    ]"
    @click="handleClick"
  >
    <div class="senior-radio-item__input">
      <div class="senior-radio-item__icon" :style="{ backgroundColor: iconBackgroundColorRef }">
        <n-icon :size="25" :color="iconColor" :component="icon" />
      </div>
      <label class="senior-radio-item__label">
        <strong>{{ label }}</strong>
        <div v-if="description" class="senior-radio-item__description">{{ description }}</div>
      </label>
      <div class="senior-radio-item__action">
        <div
          :class="[
            'senior-radio-item__select-icon',
            {
              'senior-radio-item__select-icon--checked': isChecked
            }
          ]"
        ></div>
      </div>
    </div>
    <slot v-if="isChecked">
      <div class="senior-radio-item__divider"></div>
    </slot>
  </div>
</template>

<style lang="scss" scoped>
$primary-color: #528bff;
$border-color: #e0eaff;
$background-color: #f5f8ff;
$disabled-color: #c0c0c0;

.senior-radio-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 0.5px solid $border-color;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: #fcfcfc;

  &:hover:not(&--disabled) {
    background-color: #fff;
    border-color: #b2ccff;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  &--checked {
    cursor: pointer;
    background-color: #fff;
    border-color: $primary-color;
  }

  &--disabled {
    opacity: 0.7;
    cursor: not-allowed;

    .senior-radio-item__icon,
    .senior-radio-item__select-icon,
    .senior-radio-item__label,
    .senior-radio-item__label strong,
    .senior-radio-item__action {
      cursor: not-allowed;
    }
  }

  &__input {
    display: flex;
    // align-items: center;
    width: 100%;
    cursor: pointer;
  }

  &__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 3px;
    border: 0.5px solid $border-color;
    border-radius: 8px;
    background-color: #f5faff;
    cursor: pointer;
  }

  &__label {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 12px;
    cursor: pointer;

    strong {
      margin-bottom: 4px;
    }
  }

  &__description {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
  }

  &__action {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
  }

  &__select-icon {
    width: 20px;
    height: 20px;
    border: 2px solid $primary-color;
    border-radius: 50%;
    transition: all 0.3s ease;

    &--checked {
      background-color: $primary-color;
      box-shadow: 0 0 0 2px $background-color inset;
    }
  }

  &__divider {
    width: 100%;
    // height: 1px;
    background-color: $border-color;
    // margin-top: 12px;
  }
}
</style>
